<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.inner{width: 500px;height: 300px;background: #345;}
	</style>
</head>
<body>
<div v-cloak id="app">
	<div class="inner" @click="divHandler">
		<input type="button" value="戳他" @click.stop="btnHandler">
	</div>

	<a href="http://www.baidu.com" @click.prevent="linkClick">去百度</a>

	<div class="inner" @click.capture="divHandler">
		<input type="button" value="戳他" @click="btnHandler">
	</div>

	<a @click.prevent.once="linkClick" href="http://baidu.com">去百度</a>

	<div class="inner" @click.self="divHandler">
		<input type="button" value="戳他" @click="btnHandler">
	</div>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
	el : '#app',
	data : {
		msg : 'hello'
	},
	methods : {
		divHandler(){
			console.log('divHandler 被点击')
		},
		btnHandler(){
			console.log('btnHandler 被点击')
		},
		linkClick(){
			console.log('linkClick 被点击')
		}
	}
})
</script>	
</body>
</html>